import React, { useState } from "react";
import Actions from "@/utils";
import { Button, Space } from "antd";

export default function IndexPage() {
  const [value, setValue] = useState<any>({});
  const [preview, setPreview] = useState(false);

  Actions.onGlobalStateChange((state: any) => {
    setValue(state.value);
  });

  const onChange = (data: any) => {
    console.log("子应用的值主动改变", data);
    setValue(data);
  };

  const onOnit = () => {
    Actions.setGlobalState({ type: "init", value: null });
  };

  return (
    <div className="w-full h-full">
      <div className="flex justify-between items-center p-4 py-2 bg-white border-b border-solid border-slate-200">
        <div className="text-xl font-bold"></div>
        <Space>
          <Button type="primary" onClick={() => Actions.setGlobalState({ type: "connect", value })}>
            保存
          </Button>
          <Button type="primary" onClick={() => setPreview(!preview)}>
            {!preview ? "预览" : "编辑"}
          </Button>
        </Space>
      </div>
    </div>
  );
}
